<template>
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :append-to-body="true" :close-on-click-modal="false">
    <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" :disabled="dialogStatus == 'look'" style="width: 90%; margin-left: 50px">
      <el-row :gutter="40">
        <el-col :span="12">
          <el-form-item label="表名" prop="tableName">
            <el-input v-model="temp.tableName" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="表注释" prop="tableComment">
            <el-input v-model="temp.tableComment" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="状态" prop="releaseStatus">
            <el-radio v-for="item in dictList('res_status')" :key="'type' + item.label" v-model="temp.releaseStatus" :label="item.value * 1">
              {{ item.label }}
            </el-radio>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="filter-container">
        <el-button class="filter-item" type="primary" icon="el-icon-edit" @click="addData">
          {{ $t('table.add') }}
        </el-button>
      </div>

      <el-table ref="table" :key="tableKey" :data="temp.columnModelEntities" border fit highlight-current-row style="width: 100%" @selection-change="handleSelectionChange" max-height="400px">
        <!-- <el-table-column type="selection" width="55" /> -->
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column type="index" width="50" label="序号" align="center" />
        <el-table-column align="center" label="字段名称" min-width="150px">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.columnName }}</span> -->
            <el-input v-model="scope.row.columnName" placeholder="请输入字段名称"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="字段注释" min-width="150px">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.columnComment }}</span> -->
            <el-input v-model="scope.row.columnComment" placeholder="请输入字段注释"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否主键" min-width="150px">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.columnKey | dictLabel('sf') }}</span> -->
            <el-select v-model="scope.row.columnKey" class="filter-item" placeholder="请选择是否主键">
              <el-option v-for="item in dictList('sf')" :key="'type' + item.label" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="是否为空" min-width="150px">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.columnNullable | dictLabel('sf') }}</span> -->
            <el-select v-model="scope.row.columnNullable" class="filter-item" placeholder="请选择是否为空">
              <el-option v-for="item in dictList('sf')" :key="'type' + item.label" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="数据类型" min-width="150px">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.dataType }}</span> -->
            <el-select v-model="scope.row.dataType" class="filter-item" placeholder="请选择数据类型">
              <el-option v-for="item in dictList('create_table_type')" :key="'type' + item.label" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column align="center" label="数据长度" min-width="150px">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.dataLength }}</span> -->
            <el-input v-model="scope.row.dataLength" placeholder="请输入数据长度"></el-input>
          </template>
        </el-table-column>
        <el-table-column align="center" label="数据精度" min-width="150px">
          <template slot-scope="scope">
            <!-- <span>{{ scope.row.dataPrecision }}</span> -->
            <el-input v-model="scope.row.dataPrecision" placeholder="请输入数据精度"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" min-width="100px" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="delete-text-btn" icon="el-icon-delete" @click="deleteData(scope.row, scope.$index)">
              {{ $t('table.delete') }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">
        {{ $t('table.cancel') }}
      </el-button>
      <el-button type="primary" :loading="loading" @click="dialogStatus === 'create' ? createData() : updateData()" v-if="dialogStatus != 'look'">
        {{ $t('table.confirm') }}
      </el-button>
    </div>
    <modelList ref="modelList" />
  </el-dialog>
</template>

<script>
import { addModelData, getDetail, updateModel } from '@/api/model/datamodel'
import modelList from './child/modelList.vue'
export default {
  name: 'modelFrom',
  components: { modelList },
  data() {
    return {
      rules: {
        tableName: [{ required: true, message: '表名称为必填项', trigger: 'blur' }],
        releaseStatus: [{ required: true, message: '为必填项', trigger: 'blur' }],
      },
      temp: {
        type: '0',
        tableName: '',
        tableComment: '',
        columnModelEntities: [],
      },
      treeList: [],
      treeProps: {
        value: 'id',
        label: 'name',
        expandTrigger: 'hover',
      },
      textMap: {
        update: '编辑',
        create: '新建',
        look: '查看',
      },
      tableKey: 1,
      loading: false,
      dialogFormVisible: false,
      dialogStatus: '',
      list: [],
    }
  },
  methods: {
    addData() {
      this.temp.columnModelEntities.push({
        columnName: '',
        columnComment: '',
        columnKey: '',
        columnNullable: '',
        dataType: '',
        dataLength: '',
        dataPrecision: '',
      })
    },

    handleAdd() {
      this.$refs.modelList.handleCreate()
    },
    resetTemp() {
      this.loading = false
      this.temp = {
        type: '0',
        tableName: '',
        tableComment: '',
        columnModelEntities: [],
      }
      this.temp.columnModelEntities = []
    },
    deleteData(row, index) {
      this.temp.columnModelEntities.splice(index, 1)
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          this.loading = true
          addModelData(this.temp).then((res) => {
            if (res.data.code == 0) {
              this.$emit('resList')
              this.dialogFormVisible = false
              this.$message.success(res.data.msg)
            } else {
              this.$message.error(res.data.msg)
            }
            this.loading = true
          })
        }
      })
    },
    handleUpdate(id) {
      this.resetTemp()
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      getDetail(id).then((res) => {
        console.log(res, '详情')
        this.temp = res.data.data
      })
    },
    updateData() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          updateModel(this.temp).then((res) => {
            if (res.data.code == 0) {
              this.$emit('resList')
              this.dialogFormVisible = false
              this.$message.success(res.data.msg)
            } else {
              this.$message.error(res.data.msg)
            }
            this.loading = true
          })
        }
      })
    },
    handleLook(id) {
      this.resetTemp()
      this.dialogStatus = 'look'
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      getDetail(id).then((res) => {
        console.log(res, '详情')
        this.temp = res.data.data
      })
    },
  },
}
</script>

<style lang="scss" scoped>
::v-deep(::-webkit-scrollbar) {
  display: block !important;
}
</style>
 